<template lang="html" >
	<div class="a">					
		<van-nav-bar
		  title="购买宝贝"
		  left-arrow
		  @click-left="onClickLeft"
		>		
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	    </van-nav-bar>
	    
	    <div class="wrap">
	      <!--商品详情--> 	
          <floor2 :goodsInfo="goodsInfo"></floor2>
          
          <div style="height: 10px;"></div>
          
          
          <div class="address_add" @click="addAddress" v-if="!hasDefault">            
         	<div class="icon_wrap">
         	  <van-icon name="plus"  color="#fff" size="16"/>             	  
         	</div>
         	<span class="word">添加地址</span>
            
          	<div class="arrow" >
          	   <van-icon name="arrow" size="16" color="#cecece"/>
          	</div>
          </div>
		  
		  
		  <div class="default" v-if="hasDefault" @click="source">
		  	<div class="default_a">
		  		<div class="default_a_title">{{addressInfo.addressRealName}} {{addressInfo.addressMobile}}</div>
		  		<div class="default_a_sub">{{addressInfo.addressAreaInfo}} {{addressInfo.address}}</div>
		  	</div>
		  	<div class='default_b'>
		  		<van-icon name="arrow" />
		  	</div>
		  </div>
		  

			          
		  <van-panel title="运费"  :status="freight"></van-panel> 
		  
		  <div style="height: 10px;"></div>
		  <div class="floor26">
	        <div class="item" @click="selectPay('qb')">
				<van-cell :class="{qbactive:!canqb}">
				   <div slot="title">
				   	  <div>钱包支付</div>
				   	  <div style="color: #FF3B30;font-size: 12px;">(余额¥{{walletAmount}})</div>
				   </div>	
				   <div slot="icon">
				    	<img src="../../../../../static/img/qb.png" alt="" class="qbImg"/>
				   </div>
	               <div slot="right-icon" style="display: flex;">
	               	    <span style="color: #FF3B30;font-size: 12px;margin-right: 16px;" v-if="qb">
	               	    	抵扣 ¥{{mortgage}}
	               	    </span>
	               	    <img src="../../../../../static/img/xz.png" alt="" class="x" v-if="qb"/>
	               	    <img src="../../../../../static/img/dx.png" alt="" class="x" v-else/>
	               </div>
				</van-cell>
	        </div>
	        <div class="item" @click="selectPay('ali')">
				<van-cell title="支付宝支付">
				   <div slot="icon">
				    	<img src="../../../../../static/img/ali.png" alt="" class="aliImg"/>
				   </div>				
	               <div slot="right-icon">
	               	    <img src="../../../../../static/img/xz.png" alt="" class="x" v-if="ali"/>
	               	    <img src="../../../../../static/img/dx.png" alt="" class="x" v-else/>
	               </div>
				</van-cell>        	
	        </div>
	        <div class="item" @click="selectPay('wx')">
				<van-cell title="微信支付">
				   <div slot="icon">
				    	<img src="../../../../../static/img/wx.png" alt="" class="wxImg"/>
				   </div>				
	               <div slot="right-icon">
	               	    <img src="../../../../../static/img/xz.png" alt="" class="x" v-if="wx"/>
	               	    <img src="../../../../../static/img/dx.png" alt="" class="x" v-else/>
	               </div>
				</van-cell>        	
	        </div>
		  </div>			  
	    </div>
	    
	    
		<van-submit-bar
		  label="还需支付 "
		  :price="needPay"
		  button-text="提交订单"
		  @submit="onSubmit"
		  :loading="submitLoading"
		>	
	      <div v-if="qb" slot="tip"> 
	      	使用钱包支付，退款金额将优先退还钱包(不超过￥{{mortgage}}元)
	      </div>		
		</van-submit-bar>
		
		<!--添加地址-->
		<van-popup
		  v-model="showAddAddress"
		  closeable
		  position="bottom"
		  :style="{ height: '53%' }"
		>
		
		<div style="height: 30px;"></div>
		<van-address-edit
		  :area-list="areaList"
		  :area-columns-placeholder="['请选择', '请选择', '请选择']"
		  @change-area="changeArea"		  
		  @save="onSave"
		/>		
		</van-popup>
		
		
		
		
		
	</div>

</template>                                                                

<script>
import areaList from '@/api/area.js'
import Floor2 from '_c/market/floor/floor02.vue'
import Floor3 from '_c/market/floor/floor03.vue'

import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()
export default {
	name: 'MarketBuy',	
	components: {
	    Floor2,Floor3
	},	
	data() {
       return {
       	   submitLoading:false,  // 提交状态
       	   addressId:'',  // 绑定地址ID
       	   canqb:false,   // 钱包是否能够点击
       	   walletAmount:0,         // 用于绑定钱包余额 
       	   qb:false,          // 绑定钱包支付   
           ali:false,         // 绑定支付宝支付   
           wx:false,         // 绑定微信支付   
       	   total:0,          // 绑定售价
       	   canClick:true,    // 重复点击的限制
       	   hasDefault:true, // 是否存在默认地址
       	   showAddAddress:false, // 显示添加新地址
           freight:'￥0.00', // 用于绑定运费信息,
           areaList:areaList,
           addressInfo:{}, // 绑定数据初始值
           url1:this.$api+'/marketorderservice/api/v1/market/goods', // 请求商品详情的接口
           url2:'/shop/address/default',// 请求默认地址接口
           url3:'/shop/address/add',  // 新增地址接口
           url4:'/pay/alipay/wap',   // 支付宝支付
           url5:'/pay/wxpay/wap',    // 微信支付
           url7:'/marketPay/wallentpay/wap',// 钱包支付接口
           goodsInfo:{},             // 用于绑定商品详情
           userId:'',                // 用户ID
           comId:'',                 // 商品ID
           params:{    // 新增地址的所有参数
			address:'',           // 详细地址 ,
			addressAreaId1:'',    // 一级地区Id ,
			addressAreaId2:'',    // 二级地区Id ,
			addressAreaId3:'',    // 三级地区Id ,
			addressIsDefault:1,  // 是否是默认收货地址(0-否，1-是) ,
			addressMobile:'',     // 手机 ,
			addressRealName:'',   // 收货人姓名 ,
			memberId:'',          // 会员Id     
			addressAreaInfo:''    // 拼接地区            	
           }
       }
	},
	computed: {
	    // 计算抵扣属性
	    mortgage: function () {
          let walletAmount=this.walletAmount
	      let total=this.total
	      let num=walletAmount-total
	      let result=0
	      // 余额>=售价 就显示售价
	      if(num>=0){
	      	result=total
	      }else{
	      	result=walletAmount
	      }	      	      
	      return result.toFixed(2)
	    },
	    // 计算还需支付
	    needPay:function(){
	    	let walletAmount=this.walletAmount
		    let total=this.total		    
		    let num=walletAmount-total
		    let result=0
	    	if(this.qb){
	    		if(num>=0){
	    			result=0
	    		}else{
	    			result=total-walletAmount
	    		}
	    	}else{
	    		result=total
	    	}
	    	return result*100
	    }
	},    
	methods: {
		// 选择支付方式
        selectPay(key){
           if(key=='qb'){          	
           	 // 判断钱包是否能够点击
           	 if(!this.canqb){
           	 	return false
           	 }else{
	           	// 如果余额足够 且 钱包被选中
		        let walletAmount=this.walletAmount
			    let total=this.total           	
	           	if(walletAmount-total>=0&&!this.qb){
	           	 	this.ali=false
	           	 	this.wx=false
	           	}	           	
	           	if(walletAmount-total<0&&!this.qb&&!this.ali&&!this.wx){
	           		this.ali=true
	           		this.wx=false
	           	}	           	
	           	if(this.qb&!this.ali&&!this.wx){
	           		this.ali=true
	           	}         	
           	 	this.qb=!this.qb
           	 }
           }else if(key=='ali'){
           	 // 如果余额足够 且 钱包被选中
	         let walletAmount=this.walletAmount
		     let total=this.total    		     
		     if(this.ali&&!this.wx){
		     	return false
		     }		     
           	 if(walletAmount-total>=0&&this.qb){
           	 	return false
           	 }            	 
           	 if(this.ali){
           	 	this.ali=false
           	 }else{
	           	 if(this.wx){
	               this.wx=false
	           	 }
	           	 this.ali=true        	 	
           	 }
           }else if(key=='wx'){
           	 // 如果余额足够 且 钱包被选中
	         let walletAmount=this.walletAmount
		     let total=this.total           	
           	 if(walletAmount-total>=0&&this.qb){
           	 	return false
           	 }
           	 if(this.wx&&!this.ali){
                return false
           	 }           	 
           	 if(this.wx){
           	 	this.wx=false
           	 }else{
	           	 if(this.ali){
	           	 	this.ali=false
	           	 }
	           	 this.wx=true	           	            	 	
           	 }
           }
        },		
		// 跳转到地址管理首页(复制的页面)
		source(){
			let arg='[{"comId":"'+this.comId+'"},{"userId":"'+this.userId+'"}]' 
			this.link('/market/order/buy/address',arg)			
		},
		// 新增地址的时候 记录区域ID		
		changeArea(arr){
        	this.params.addressAreaId1=arr[0].code
        	this.params.addressAreaId2=arr[1].code
        	this.params.addressAreaId3=arr[2].code
        	this.params.addressAreaInfo=arr[0].name+' '+ arr[1].name +' ' + arr[2].name 
		},
		// 添加地址
		addAddress(){
			this.showAddAddress=true
		},
		// 保存新增地址
		onSave(content){
			if(!this.canClick){
				return false
			}
			this.canClick=false
			this.params.addressRealName=content.name
			this.params.addressMobile=content.tel
			this.params.address=content.addressDetail			
	      	let that=this	      	
		    this.$Axios.Post(this.url3,this.params)
		    .then(function(res) {	
		       that.canClick=true	
               that.showAddAddress=false
               that.getDefaultAddress()
		    })	
		},
	    // 获取详情信息
	    getData(){
	      	let that=this	      	
		    this.$Axios.Get(this.url1+'/'+this.comId+'/'+this.userId)
		    .then(function(res) {		        	
		       // 判断余额是否为0 如果为0 不能点击钱包	
		       if(res.data.walletAmount==0){
		       	 that.qb=false  // 不默认选中
		       	 that.ali=true  // 支付宝默认被选中
		       	 that.canqb=false // 钱包不能点击
		       }
		       // 如果余额<售价
		       else if(res.data.walletAmount-res.data.totleMoney<0){
		       	 that.qb=true   // 默认选中钱包支付
		       	 that.canqb=true // 可以点击钱包支付
		       	 that.ali=true   // 默认选中支付宝支付
		       }
		       else{
		       	 that.qb=true   // 默认选中钱包支付 
		       	 that.canqb=true // 可以点击钱包
		       }
		       that.walletAmount=res.data.walletAmount
		       that.total=res.data.totleMoney
               that.goodsInfo=res.data
               that.freight='￥'+res.data.freight.toFixed(2)
		    })		    	
	    },
	    // 查询默认的收货地址
	    getDefaultAddress(){
	    	let that=this	
		    that.$Axios.Post(that.url2,{"memberId":that.userId})
		    .then(function(res) {	
               if(res.data.address){
               	  that.addressId= res.data.address.addressId
               	  that.addressInfo=res.data.address
               	  that.hasDefault=true
               	  
               }else{
               	  that.hasDefault=false
               }
		    })		    	
	    },
	    
	    // 支付方式 
	    pay(type){
	       let that=this
	       // 只需要钱包支付，调用钱包支付接口
	       if(type==1){
	    	 that.$Axios2.Get(that.url7+'?addressId='+that.addressId+'&ordersId='+that.ordersId+'&userId='+that.userId)
	    	 .then(function(result){
	    	 	// console.log(result)
	    	 	that.submitLoading=false
	    	 	let arg='[{"ordersId":"'+that.ordersId+'"}]' 
	    	 	that.link('/market/order/detail',arg)			    	 	
	    	 })
	       } 
	       // 组合支付,调用阿里支付接口
	       else if(type==2){
	       	  
	       }
	       // 组合支付,调用微信支付接口
	       else if(type==3){
	       	
	       }
	       // 只调用阿里支付接口
	       else if(type==4){
	       	
	       }
	       // 只调用微信支付接口
	       else if(type==5){
	       	
	       }	        
	    },
	    
	    
	    
		// 提交订单
		onSubmit(){     
		   this.submitLoading=true	
           if(!this.qb&&!this.ali&&!this.wx){
           	  this.$toast('请选择一种支付方式')
           	  this.submitLoading=false
           	  return false
           }
           if(this.addressId==''){
           	  this.$toast('请填写收货地址')
           	  this.submitLoading=false
           	  return false           	
           }           
           // 需要钱包支付
           if(this.qb){
		      let walletAmount=this.walletAmount
			  let total=this.total
			  let num=walletAmount-total
			  if(num>=0){
			  	 this.pay(1)
			  	 //console.log('只需要钱包支付，调用钱包支付接口')
			  }else{
	           	  if(this.ali){
	           	  	this.pay(2)
	           	  	//console.log('组合支付,调用阿里支付接口')
	           	  }
	           	  if(this.wx){
	           	  	this.pay(3)
	           	  	//console.log('组合支付,调用微信支付接口')
	           	  }
			  }
           	  
           }
           // 不需要钱包支付
           else{
           	  //console.log('不需要钱包支付')
           	  if(this.ali){
           	  	this.pay(4)
           	  	//console.log('调用阿里支付接口')
           	  }
           	  if(this.wx){
           	  	this.pay(5)
           	  	//console.log('调用微信支付接口')
           	  }
           	  
           }
		}
	},
	mixins:[publicFun],//混入
	mounted() {
		this.comId=this.$router.currentRoute.query.comId;
		this.userId=this.$router.currentRoute.query.userId;	
		this.ordersId=this.$router.currentRoute.query.ordersId;	
        this.params.memberId=this.userId
		this.getData()
		this.getDefaultAddress()
	}
}
</script>

<style scoped lang="scss">
.van-nav-bar__title{font-weight: bold;}
.a{background: #f3f6fb;min-height: 100%;width: 100%;position: absolute;}
.wrap{padding: 10px 0 60px;}
.van-submit-bar__text{text-align: left;padding-left: 10px;}

.van-panel__header-value {
    color: #FF3B30;
}
.van-submit-bar__price {
    color: #FF3B30;

}
.address_add{padding: 16px;background: #fff;box-sizing: border-box;display: flex;align-items: center;position: relative;}
.address_add::before{position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
    background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
    background-size: 80px;
    content: '';	
}
.icon_wrap{border-radius:4px;width: 30px;height: 30px;background:#1989fa;display: flex;justify-content: center;align-items: center;}
.word{font-size: 16px;margin-left: 10px;}
.arrow{position: absolute;right: 16px;top: 22px;}
.van-address-list{padding: 0;}
.van-address-list__bottom{display: none;}


.default{background: #fff;padding: 12px;position: relative;}
.default_a{padding-right:44px ;}
.default_a_title{font-size: 16px;margin-bottom: 8px;}
.default_a_sub{font-size: 12px;}
.default_b{position: absolute;top: 50%;right: 16px;font-size: 18px;color: #999;transform: translate(0,-50%);}



.floor26{background: #fff;}
.qbImg,.aliImg,.wxImg{width: 24px;height: 24px;display: block;margin-right: 8px;}
.x{width: 24px;height: 24px;display: block;}
.tips{position: absolute;bottom:50px;width: 100%;padding: 4px 15px;background:#f9ddd2;color: #FB713B;}
.qbactive{opacity: 0.5;}
</style>